<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2022-08-10 14:18:56
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-02-14 11:31:38
 * @FilePath: \vite-project\src\component\OneTabs.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="Second-tabs-box" :style="'min-height:' + clientHeight + 'px;'">
    <card none padbottom="0">
      <van-field v-model="sectionName" input-align="right" name="当前课节" label="当前课节" placeholder="当前课节" />
    </card>
    <!-- 选择学生 -->
    <card>
      <van-row @click="handleStudentCell" justify="space-between">
        <van-col>
          <span style="color: #f04d53; margin-right: 5px">*</span>选择学生
        </van-col>
        <van-col v-if="choiceStudents.length > 0">
          已选择
          <span style="color: #3d7fff">{{ choiceStudents.length }}个学生</span>
          <van-icon name="arrow" color="#969799" />
        </van-col>
        <van-col v-else>
          请选择
          <van-icon name="arrow" color="#969799" />
        </van-col>
      </van-row>
      <!-- 列表 -->
      <van-row>
        <van-col style="margin-top: 12px" v-for="(item, index) in choiceStudents" :key="index">
          <div class="hl-tabs-row">
            {{ item.name }}-{{ item.className }}
            <van-icon name="clear" />
          </div>
        </van-col>
      </van-row>
    </card>
    <card none padbottom="0">
      <van-field v-model="placeName" required is-link readonly name="picker" input-align="right" label="选择地点"
        placeholder="选择地点" @click="show = true" />
    </card>
    <!-- 其他地点 -->
    <card padbottom="0">
      <van-row>
        <van-col>
          <span style="color: #f04d53; margin-right: 5px">*</span>其他地点
        </van-col>
      </van-row>
      <van-row>
        <van-field v-model="placeName" rows="1" autosize type="textarea" placeholder="请输入其他地点" />
      </van-row>
    </card>
    <card none padbottom="0">
      <van-field v-model="reasonName" required is-link readonly name="picker" input-align="right" label="选择原因"
        placeholder="选择原因" @click="reasonShow = true" />
    </card>
    <!-- 其他原因 -->
    <card padbottom="0">
      <van-row>
        <van-col>
          <span style="color: #f04d53; margin-right: 5px">*</span>其他原因
        </van-col>
      </van-row>
      <van-row>
        <van-field v-model="reasonName" rows="1" autosize type="textarea" placeholder="请输入原因" />
      </van-row>
    </card>
    <!-- 上传图片 -->
    <card padbottom="7">
      <van-row>
        <van-col>
          <span style="color: #f04d53; margin-right: 5px">*</span>上传图片
        </van-col>
      </van-row>
      <van-row style="margin-top: 15px">
        <van-uploader v-model="fileList" multiple :max-count="3" :before-read="beforeRead" :after-read="afterRead"
          preview-size="80" />
      </van-row>
    </card>
    <!-- 提交按钮 -->
    <div class="fixed-btn-box">
      <Button block round color="#3D7FFF">提 交</Button>
    </div>
    <!-- 请选择学生 -->
    <van-action-sheet teleport="#app" v-model:show="isCkeckShow" title="请选择学生">
      <div class="action-content-box">
        <van-search v-model="actionSearch" shape="round" placeholder="请输入学生姓名搜素" />
        <div class="scroll-flex-box" :style="
          'max-height:' +
          ($util.getClientHeight() - 260) +
          'px;min-height: 200px;'
        ">
          <van-row class="row-content-box" v-for="(item, index) in List" :key="index" justify="space-between">
            <van-col> {{ item.name }}-{{ item.className }} </van-col>
            <van-col>
              <van-icon name="success" color="#3D7FFF" />
            </van-col>
          </van-row>
        </div>
        <div class="fixed-flex-box">
          <Button padding block round color="#3D7FFF" @click="studentSave">确 定</Button>
        </div>
      </div>
    </van-action-sheet>
    <!-- 选择地点 -->
    <van-action-sheet v-model:show="show" teleport="#app" :actions="actions" cancel-text="取消" description="请选择巡检地点"
      close-on-click-action />
    <!-- 选择原因 -->
    <van-action-sheet v-model:show="reasonShow" teleport="#app" :actions="actions" cancel-text="取消" description="请选择原因"
      close-on-click-action />
  </div>
</template>
<script lang="ts" setup>
import { Toast } from "vant";
import $util from "../util/util";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
const sectionName = ref("第七课节");
const clientHeight = window.innerHeight - 155;
const show = ref(false);
const placeName = ref("");
const actions = [{ name: "选项一" }, { name: "选项二" }, { name: "选项三" }];
const reasonShow = ref(false);
const reasonName = ref("");
// 上传图片
const fileList = ref([]);
// 上传之前
const beforeRead = (file: any) => {
  if (file.type.indexOf("image/") === -1) {
    Toast("请上传正确的图片格式");
    return false;
  }
  return true;
};
const afterRead = (file: any) => {
  file.status = "uploading";
  file.message = "上传中...";

  setTimeout(() => {
    file.status = "failed";
    file.message = "上传失败";
  }, 1000);
};
// 选择学生
const isCkeckShow = ref(false);
const choiceStudents = ref([
  {
    id: "1",
    name: "钱丽米",
    stuNum: 20220140,
    className: "初中部-2020级02班",
    checked: true,
  },
  {
    id: "2",
    name: "戴朗菲",
    stuNum: 20220141,
    className: "初中部-2021级01班",
    checked: true,
  },
]);
const handleStudentCell = () => {
  isCkeckShow.value = true;
};
const actionSearch = ref("");
const List = ref([
  {
    id: "1",
    name: "钱丽米",
    stuNum: 20220140,
    className: "初中部-2020级02班",
    checked: false,
  },
  {
    id: "2",
    name: "戴朗菲",
    stuNum: 20220141,
    className: "初中部-2021级01班",
    checked: false,
  },
  {
    id: "3",
    name: "戴朗菲",
    stuNum: 20220142,
    className: "初中部-2021级01班",
    checked: true,
  },
]);
const studentSave = () => {
  isCkeckShow.value = false;
};
onMounted(() => { });
</script>
<style lang="scss" scoped>
.Second-tabs-box {
  padding: 0 15px;

  .hl-tabs-row {
    // height: 40px;
    background: #f2f6ff;
    border-radius: 5px;
    padding: 10px;
    color: #3d7fff;
  }

  .fixed-btn-box {
    padding: 30px 15%;
  }

  .van-cell {
    border-radius: 10px;
    font-size: 16px;
    padding: 15px;
    // margin-top: 15px;
  }

  :deep(.van-field__label--required:before) {
    margin-right: 5px;
  }

  :deep(.van-cell__value--alone) {
    color: #ffffff !important;
  }
}

.action-content-box {
  position: relative;

  .van-search {
    padding: 15px;
  }

  .scroll-flex-box {
    padding: 0 15px;
    padding-bottom: 100px;
    box-sizing: border-box;
    overflow-y: scroll;

    .row-content-box {
      padding: 10px 15px;
      background: #f2f6ff;
      color: #3d7fff;
      margin-bottom: 15px;
      border-radius: 10px;
    }
  }

  .fixed-flex-box {
    width: 100%;
    position: fixed;
    bottom: 0;
    background: #ffffff;
    box-shadow: 0px -6px 10px 1px rgba(0, 0, 0, 0.05);
    padding: 15px 15%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

    .hl-btn {
      margin-bottom: 0px;
    }
  }
}
</style>
